<template>
	<div class="page">
		<view class="imgBox">
			<img class="pic1" referrerpolicy="no-referrer" :src="require('@/static/personalCenter/fail.png')" />
		</view>
		<view class="tips">
			<view class="word2">充值失败！</view>
			<view class="word3">系统繁忙请稍后再试</view>
		</view>
		<view class="btnBox">
			<button class="btn btn1" @click="onClick_1">
				退出
			</button>
			<button class="btn btn2" :disabled="btnLoading" :loading="btnLoading" @click="onClick_2">
				重新支付
			</button>
		</view>
	</div>
</template>
<script>
	import {
		corpPay
	} from '@/common/js/corpPay.js';

	export default {
		data() {
			return {
				constants: {},
				orderNo: '',
				btnLoading: false
			};
		},
		onLoad(e) {
			if (e.orderNo) {
				this.orderNo = e.orderNo
			}
		},
		methods: {
			onClick_1() {
				uni.navigateBack();
			},
			onClick_2() {
				if (this.orderNo) {
					this.btnLoading = true;
					corpPay(this.orderNo).finally(e => {
						this.btnLoading = false;
					});
				}
			}
		}
	};
</script>
<style lang="less" scoped>
	.page {
		background-color: #FFFFFF;
		overflow: hidden;
		justify-content: flex-start;
		padding-top: 0;

		.imgBox {
			text-align: center;
			width: 100vw;
			position: relative;

			.pic1 {
				width: 306rpx;
				height: 306rpx;
				align-self: center;
				margin-top: 140rpx;
			}
		}

		.tips {
			text-align: center;
			margin-top: 66rpx;
			margin-bottom: 130rpx;

			.word2 {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #555555;
				line-height: 45rpx;
			}

			.word3 {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #555555;
				line-height: 40rpx;
				margin-top: 20rpx;
			}
		}

		.btnBox {
			margin: 0 auto;
			display: flex;
			justify-content: center;

			.btn {
				width: 305rpx;
				height: 82rpx;
				border-radius: 41rpx;
				font-size: 28rp;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				line-height: 40rpx;
				padding: 21rpx;
			}

			.btn1 {
				background: #FFFFFF;
				border-radius: 41rpx;
				border: 2rpx solid #999999;
				color: #555555;
				margin-right: 40rpx;
			}

			.btn2 {
				background: linear-gradient(135deg, #F78833 0%, #FFC77B 100%);
				color: #FFFFFF;
			}
		}
	}
</style>
